<template>
	<div>
		<el-dialog v-model="formVisible" :title="formTitle" width="80%" destroy-on-close :fullscreen='false'>
			<el-form class="formModel_form" ref="formRef" :model="form" label-width="$template2.back.add.form.base.labelWidth" :rules="rules">
				<el-row>
					<el-col :span="12">
						<el-form-item label="入库编号" prop="rukubianhao">
							<el-input class="list_inp" v-model="form.rukubianhao" :readonly="true" placeholder="入库编号" />
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="药品名称" prop="yaopinmingcheng">
							<el-input class="list_inp" v-model="form.yaopinmingcheng" placeholder="药品名称"
								 type="text" 								:readonly="!isAdd||disabledForm.yaopinmingcheng?true:false" />
						</el-form-item>
					</el-col>

					<el-col :span="12">
						<el-form-item label="供应商" prop="gongyingshang">
							<el-input class="list_inp" v-model="form.gongyingshang" placeholder="供应商"
								 type="text" 								:readonly="!isAdd||disabledForm.gongyingshang?true:false" />
						</el-form-item>
					</el-col>

					<el-col :span="12">
						<el-form-item label="剂型" prop="jixing">
							<el-input class="list_inp" v-model="form.jixing" placeholder="剂型"
								 type="text" 								:readonly="!isAdd||disabledForm.jixing?true:false" />
						</el-form-item>
					</el-col>

					<el-col :span="12">
						<el-form-item label="规格" prop="guige">
							<el-input class="list_inp" v-model="form.guige" placeholder="规格"
								 type="text" 								:readonly="!isAdd||disabledForm.guige?true:false" />
						</el-form-item>
					</el-col>

					<el-col :span="12">
						<el-form-item label="生产时间" prop="shengchanshijian">
							<el-date-picker
								class="list_date"
								v-model="form.shengchanshijian"
								format="YYYY 年 MM 月 DD 日"
								value-format="YYYY-MM-DD"
								type="datetime"
								:readonly="!isAdd||disabledForm.shengchanshijian?true:false"
								placeholder="请选择生产时间" />
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="到期时间" prop="daoqishijian">
							<el-date-picker
								class="list_date"
								v-model="form.daoqishijian"
								format="YYYY 年 MM 月 DD 日"
								value-format="YYYY-MM-DD"
								type="datetime"
								:readonly="!isAdd||disabledForm.daoqishijian?true:false"
								placeholder="请选择到期时间" />
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="药品单价" prop="yaopindanjia">
							<el-input class="list_inp" v-model.number="form.yaopindanjia" placeholder="药品单价"
								 type="number" 								:readonly="!isAdd||disabledForm.yaopindanjia?true:false" />
						</el-form-item>
					</el-col>

					<el-col :span="12">
						<el-form-item label="入库数量" prop="kucun">
							<el-input class="list_inp" v-model.number="form.kucun" placeholder="入库数量"
								 type="text" 								:readonly="!isAdd||disabledForm.kucun?true:false" />
						</el-form-item>
					</el-col>

					<el-col :span="12">
						<el-form-item label="药品总价" prop="yaopinzongjia">
							<el-input class="list_inp" v-model="yaopinzongjia" :readonly="true" placeholder="药品总价" />
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="备注" prop="beizhu">
							<el-input class="list_inp" v-model="form.beizhu" placeholder="备注"
								 type="text" 								:readonly="!isAdd||disabledForm.beizhu?true:false" />
						</el-form-item>
					</el-col>

					<el-col :span="12">
						<el-form-item label="入库时间" prop="rukushijian">
							<el-date-picker
								class="list_date"
								v-model="form.rukushijian"
								format="YYYY-MM-DD HH:mm:ss"
								value-format="YYYY-MM-DD HH:mm:ss"
								type="datetime"
								:readonly="!isAdd||disabledForm.rukushijian?true:false"
								placeholder="请选择入库时间" />
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="药师账号" prop="yaoshizhanghao">
							<el-input class="list_inp" v-model="form.yaoshizhanghao" placeholder="药师账号"
								 type="text" 								:readonly="!isAdd||disabledForm.yaoshizhanghao?true:false" />
						</el-form-item>
					</el-col>

					<el-col :span="12">
						<el-form-item label="药师姓名" prop="yaoshixingming">
							<el-input class="list_inp" v-model="form.yaoshixingming" placeholder="药师姓名"
								 type="text" 								:readonly="!isAdd||disabledForm.yaoshixingming?true:false" />
						</el-form-item>
					</el-col>

				</el-row>
			</el-form>
			<template #footer v-if="isAdd||type=='logistics'||type=='reply'">
				<span class="formModel_btn_box">
					<el-button class="formModel_cancel" @click="closeClick">取消</el-button>
					<el-button class="formModel_confirm" type="primary" @click="save"
						>
						提交
					</el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>
<script setup>
	import {
		reactive,
		ref,
		getCurrentInstance,
		nextTick,
		computed,
		defineEmits
	} from 'vue'
	const context = getCurrentInstance()?.appContext.config.globalProperties;	
	const emit = defineEmits(['formModelChange'])
	//基础信息
	const tableName = 'yaopinruku'
	const formName = '药品入库'
	//基础信息
	//form表单
	const form = ref({})
	const disabledForm = ref({
		rukubianhao : false,
		yaopinmingcheng : false,
		gongyingshang : false,
		jixing : false,
		guige : false,
		shengchanshijian : false,
		daoqishijian : false,
		yaopindanjia : false,
		kucun : false,
		yaopinzongjia : false,
		beizhu : false,
		rukushijian : false,
		yaoshizhanghao : false,
		yaoshixingming : false,
	})
	const formVisible = ref(false)
	const isAdd = ref(false)
	const formTitle = ref('')
	//表单验证
	//匹配整数
	const validateIntNumber = (rule, value, callback) => {
		if (!value) {
			callback();
		} else if (!context?.$toolUtil.isIntNumer(value)) {
			callback(new Error("请输入整数"));
		} else {
			callback();
		}
	}
	//匹配数字
	const validateNumber = (rule, value, callback) => {
		if(!value){
			callback();
		} else if (!context?.$toolUtil.isNumber(value)) {
			callback(new Error("请输入数字"));
		} else {
			callback();
		}
	}
	//匹配手机号码
	const validateMobile = (rule, value, callback) => {
		if(!value){
			callback();
		} else if (!context?.$toolUtil.isMobile(value)) {
			callback(new Error("请输入正确的手机号码"));
		} else {
			callback();
		}
	}
	//匹配电话号码
	const validatePhone = (rule, value, callback) => {
		if(!value){
			callback();
		} else if (!context?.$toolUtil.isPhone(value)) {
			callback(new Error("请输入正确的电话号码"));
		} else {
			callback();
		}
	}
	//匹配邮箱
	const validateEmail = (rule, value, callback) => {
		if(!value){
			callback();
		} else if (!context?.$toolUtil.isEmail(value)) {
			callback(new Error("请输入正确的邮箱地址"));
		} else {
			callback();
		}
	}
	//匹配身份证
	const validateIdCard = (rule, value, callback) => {
		if(!value){
			callback();
		} else if (!context?.$toolUtil.checkIdCard(value)) {
			callback(new Error("请输入正确的身份证号码"));
		} else {
			callback();
		}
	}
	//匹配网站地址
	const validateUrl = (rule, value, callback) => {
		if(!value){
			callback();
		} else if (!context?.$toolUtil.isURL(value)) {
			callback(new Error("请输入正确的URL地址"));
		} else {
			callback();
		}
	}
	const rules = ref({
		rukubianhao: [
		],
		yaopinmingcheng: [
		],
		gongyingshang: [
		],
		jixing: [
		],
		guige: [
		],
		shengchanshijian: [
		],
		daoqishijian: [
		],
		yaopindanjia: [
			{required: true,message: '请输入',trigger: 'blur'}, 
			{ validator: validateNumber, trigger: 'blur' },
		],
		kucun: [
			{required: true,message: '请输入',trigger: 'blur'}, 
			{ validator: validateIntNumber, trigger: 'blur' },
		],
		yaopinzongjia: [
			{ validator: validateNumber, trigger: 'blur' },
		],
		beizhu: [
		],
		rukushijian: [
		],
		yaoshizhanghao: [
		],
		yaoshixingming: [
		],
	})
	//表单验证
	
	const formRef = ref(null)
	const id = ref(0)
	const type = ref('')
	const yaopinzongjia =computed(()=>{
		let c = form.value
		let a = c.yaopindanjia*c.kucun
		form.value.yaopinzongjia = a?a.toFixed(2) : 0
		return a?a.toFixed(2) : 0
	})
	//methods

	//获取唯一标识
	const getUUID =()=> {
      return new Date().getTime();
    }
	//重置
	const resetForm = () => {
		form.value = {
			rukubianhao: getUUID(),
			yaopinmingcheng: '',
			gongyingshang: '',
			jixing: '',
			guige: '',
			shengchanshijian: '',
			daoqishijian: '',
			yaopindanjia: '',
			kucun: '',
			yaopinzongjia: '',
			beizhu: '',
			rukushijian: '',
			yaoshizhanghao: '',
			yaoshixingming: '',
		}
	}
	//获取info
	const getInfo = ()=>{
		context?.$http({
			url: `${tableName}/info/${id.value}`,
			method: 'get'
		}).then(res => {
			let reg=new RegExp('../../../file','g')
			form.value = res.data.data
			formVisible.value = true
		})
	}
	const crossRow = ref('')
	const crossTable = ref('')
	const crossTips = ref('')
	const crossColumnName = ref('')
	const crossColumnValue = ref('')
	//初始化
	const init=(formId=null,formType='add',formNames='',row=null,table=null,statusColumnName=null,tips=null,statusColumnValue=null)=>{
		resetForm()
			form.value.rukushijian = context?.$toolUtil.getCurDateTime()
		if(formId){
			id.value = formId
			type.value = formType
		}
		if(formType == 'add'){
			isAdd.value = true
			formTitle.value = '新增' + formName
			formVisible.value = true
		}else if(formType == 'info'){
			isAdd.value = false
			formTitle.value = '查看' + formName
			getInfo()
		}else if(formType == 'edit'){
			isAdd.value = true
			formTitle.value = '修改' + formName
			getInfo()
		}
		else if(formType == 'cross'){
			isAdd.value = true
			formTitle.value = formNames
			// getInfo()
			for(let x in row){
				if(x=='rukubianhao'){
					form.value.rukubianhao = row[x];
					disabledForm.value.rukubianhao = true;
					continue;
				}
				if(x=='yaopinmingcheng'){
					form.value.yaopinmingcheng = row[x];
					disabledForm.value.yaopinmingcheng = true;
					continue;
				}
				if(x=='gongyingshang'){
					form.value.gongyingshang = row[x];
					disabledForm.value.gongyingshang = true;
					continue;
				}
				if(x=='jixing'){
					form.value.jixing = row[x];
					disabledForm.value.jixing = true;
					continue;
				}
				if(x=='guige'){
					form.value.guige = row[x];
					disabledForm.value.guige = true;
					continue;
				}
				if(x=='shengchanshijian'){
					form.value.shengchanshijian = row[x];
					disabledForm.value.shengchanshijian = true;
					continue;
				}
				if(x=='daoqishijian'){
					form.value.daoqishijian = row[x];
					disabledForm.value.daoqishijian = true;
					continue;
				}
				if(x=='yaopindanjia'){
					form.value.yaopindanjia = row[x];
					disabledForm.value.yaopindanjia = true;
					continue;
				}
				if(x=='kucun'){
					form.value.kucun = row[x];
					disabledForm.value.kucun = true;
					continue;
				}
				if(x=='yaopinzongjia'){
					form.value.yaopinzongjia = row[x];
					disabledForm.value.yaopinzongjia = true;
					continue;
				}
				if(x=='beizhu'){
					form.value.beizhu = row[x];
					disabledForm.value.beizhu = true;
					continue;
				}
				if(x=='rukushijian'){
					form.value.rukushijian = row[x];
					disabledForm.value.rukushijian = true;
					continue;
				}
				if(x=='yaoshizhanghao'){
					form.value.yaoshizhanghao = row[x];
					disabledForm.value.yaoshizhanghao = true;
					continue;
				}
				if(x=='yaoshixingming'){
					form.value.yaoshixingming = row[x];
					disabledForm.value.yaoshixingming = true;
					continue;
				}
			}
			if(row){
				crossRow.value = row
			}
			if(table){
				crossTable.value = table
			}
			if(tips){
				crossTips.value = tips
			}
			if(statusColumnName){
				crossColumnName.value = statusColumnName
			}
			if(statusColumnValue){
				crossColumnValue.value = statusColumnValue
			}
			form.value.kucun = 0
			disabledForm.value.kucun = false;
			formVisible.value = true
		}

		context?.$http({
			url: `${context?.$toolUtil.storageGet('sessionTable')}/session`,
			method: 'get'
		}).then(res => {
			var json = res.data.data
			if(json.hasOwnProperty('yaoshizhanghao')&& context?.$toolUtil.storageGet("role")!="管理员"){
				form.value.yaoshizhanghao = json.yaoshizhanghao
				disabledForm.value.yaoshizhanghao = true;
			}
			if(json.hasOwnProperty('yaoshixingming')&& context?.$toolUtil.storageGet("role")!="管理员"){
				form.value.yaoshixingming = json.yaoshixingming
				disabledForm.value.yaoshixingming = true;
			}
		})
	}
	//初始化
	//声明父级调用
	defineExpose({
		init
	})
	//关闭
	const closeClick = () => {
		formVisible.value = false
	}
	//富文本
	const editorChange = (e,name) =>{
		form.value[name] = e
	}
	//提交
	const save=()=>{
		var table = crossTable.value
		var objcross = JSON.parse(JSON.stringify(crossRow.value))
		if(!!objcross) {
			objcross.kucun = parseFloat(objcross.kucun) + parseFloat(form.value.kucun)
		}
		let crossUserId = ''
		let crossRefId = ''
		let crossOptNum = ''
		if(type.value == 'cross'){
			if(crossColumnName.value!=''){
				if(!crossColumnName.value.startsWith('[')){
					for(let o in objcross){
						if(o == crossColumnName.value){
							objcross[o] = crossColumnValue.value
						}
					}
					//修改跨表数据
					changeCrossData(objcross)
				}else{
					crossUserId = context?.$toolUtil.storageGet('userid')
					crossRefId = objcross['id']
					crossOptNum = crossColumnName.value.replace(/\[/,"").replace(/\]/,"")
				}
			}
		}
		formRef.value.validate((valid)=>{
			if(valid){
				if(crossUserId&&crossRefId){
					form.value.crossuserid = crossUserId
					form.value.crossrefid = crossRefId
					let params = {
						page: 1,
						limit: 1000, 
						crossuserid:form.value.crossuserid,
						crossrefid:form.value.crossrefid,
					}
					context?.$http({
						url: `${tableName}/page`,
						method: 'get', 
						params: params 
					}).then(res=>{
						if(res.data.data.total>=crossOptNum){
							context?.$toolUtil.message(`${crossTips.value}`,'error')
							return false
						}else{
							context?.$http({
								url: `${tableName}/${!form.value.id ? "save" : "update"}`,
								method: 'post', 
								data: form.value 
							}).then(res=>{
								//修改跨表数据
								changeCrossData(objcross)
								emit('formModelChange')
								context?.$toolUtil.message(`操作成功`,'success',()=>{
									formVisible.value = false
								})
							})
						}
					})
				}else{
					context?.$http({
						url: `${tableName}/${!form.value.id ? "save" : "update"}`,
						method: 'post', 
						data: form.value 
					}).then(res=>{
						//修改跨表数据
						changeCrossData(objcross)
						emit('formModelChange')
						context?.$toolUtil.message(`操作成功`,'success',()=>{
							formVisible.value = false
						})
					})
				}
			}
		})
	}
	//修改跨表数据
	const changeCrossData=(row)=>{
		context?.$http({
			url: `${crossTable.value}/update`,
			method: 'post',
			data: row
		}).then(res=>{})
	}
</script>
<style lang="scss" scoped>
	// 表单
	.formModel_form{
		border-radius: 6px;
		padding: 30px;
		box-shadow: 0 0px 0px rgba(85, 255, 255, 0.5);
		// form item
		:deep(.el-form-item) {
			border: 1px solid #ddd;
			margin: 0;
			display: flex;
			//label
			.el-form-item__label {
			 border: 1px solid #ddd;
			 padding: 0;
			 background: rgba(236,236,236,1);
			 display: block;
			 width: 120px;
			 border-width: 0 2px 0 0;
			 text-align: center;
			}
			// 内容盒子
			.el-form-item__content {
				padding: 0 20px;
				display: flex;
				width: calc(100% - 120px);
				justify-content: flex-start;
				align-items: center;
				flex-wrap: wrap;
				// 输入框
				.list_inp {
					border: 1px solid #ddd;
					box-shadow: 0 0 0px rgba(85, 255, 255, 0.5);
					padding: 0 10px;
					width: 100%;
					line-height: 36px;
					box-sizing: border-box;
					height: 36px;
					//去掉默认样式
					.el-input__wrapper{
						border: none;
						box-shadow: none;
						background: none;
						border-radius: 0;
						height: 100%;
						padding: 0;
					}
					.is-focus {
						box-shadow: none !important;
					}
				}
				//日期选择器
				.list_date {
					border: 1px solid #ddd;
					border-radius: 0;
					box-shadow: 0 0 0px rgba(85, 255, 255, 0.5);
					width: 100%;
					line-height: 36px;
					box-sizing: border-box;
					//去掉默认样式
					.el-input__wrapper{
						border: none;
						box-shadow: none;
						background: none;
						border-radius: 0;
						height: 100%;
					}
				}
			}
		}
	}
	// 按钮盒子
	.formModel_btn_box {
		padding: 40px 0 0;
		display: flex;
		width: 100%;
		justify-content: center;
		align-items: center;
		.formModel_cancel {
			border: 0;
			cursor: pointer;
			border-radius: 4px;
			padding: 0 24px;
			margin: 0 10px 0 0;
			outline: none;
			color: #fff;
			background: rgba(27, 78, 133, 1);
			width: auto;
			font-size: 14px;
			height: 32px;
		}
		.formModel_cancel:hover {
			background: rgba(27, 78, 133, 0.5);
		}
		
		.formModel_confirm {
			border: 0;
			cursor: pointer;
			border-radius: 4px;
			padding: 0 24px;
			margin: 0 10px 0 0;
			outline: none;
			color: #fff;
			background: rgba(241, 49, 100, 1);
			width: auto;
			font-size: 14px;
			height: 32px;
		}
		.formModel_confirm:hover {
			background: rgba(241, 49, 100, .5);
		}
	}
</style>